<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-添加元素</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
      $(function () {
        // 尾部添加城市
        $("button:first").click(function () {
          // 获取ul标签
          let $ul = $("ul");
          let $inputEle = $("input").val();
          // 创造li标签
          let liEle = document.createElement("li");
          let li = $(liEle).html($inputEle);
          $ul.append(li);
        });

        // 头部添加城市
        $("button").eq(1).click(function () {
          // 获取ul标签
          let $ul = $("ul");
          let $inputEle = $("input").val();
          // 创造li标签
          let liEle = document.createElement("li");
          let li = $(liEle).html($inputEle);
          $ul.prepend(li);
        });

        //在北京前面添加城市
        $("button").eq(2).click(function () {
          // 获取北京标签
          let $city1 = $("#city1");
          let $inputEle = $("input").val();
          // 创造li标签
          let liEle = document.createElement("li");
          let li = $(liEle).html($inputEle);
          // 统计元素之间添加用before
          $city1.before(li)
        });

        //在北京后面添加城市
        $("button").eq(3).click(function () {
          // 获取北京标签
          let $city1 = $("#city1");
          let $inputEle = $("input").val();
          // 创造li标签
          let liEle = document.createElement("li");
          let li = $(liEle).html($inputEle);
          // 统计元素之间添加用before
          $city1.after(li)
        });
      })
    </script>

</head>
<body>
    <input type="text">
    <button>尾部添加城市</button>
    <button>头部添加城市</button>
    <button>在北京前面添加城市</button>
    <button>在北京后面添加城市</button>
    <h4>城市排行榜</h4>
    <ul>
      <li id="city1">北京</li>
    </ul>
</body>
</html>